<script setup lang="ts">
import { computed } from "vue";

interface PropertyItem {
  label: string;
  type: "text" | "number" | "boolean" | "select";
  value: unknown;
  options?: Array<{ label: string; value: string }>;
}

const props = defineProps<{
  selectedComponent: {
    type: string;
    config: Record<string, unknown>;
  } | null;
}>();

const emit = defineEmits(["update:config"]);

const properties = computed<PropertyItem[]>(() => {
  if (!props.selectedComponent) return [];

  switch (props.selectedComponent.type) {
    case "table":
      return [
        {
          label: "表格标题",
          type: "text",
          value: props.selectedComponent.config.title || "",
        },
        {
          label: "显示边框",
          type: "boolean",
          value: props.selectedComponent.config.bordered ?? true,
        },
      ];
    case "input":
      return [
        {
          label: "输入框标签",
          type: "text",
          value: props.selectedComponent.config.label || "",
        },
        {
          label: "是否必填",
          type: "boolean",
          value: props.selectedComponent.config.required ?? false,
        },
      ];
    default:
      return [];
  }
});

const updateProperty = (key: string, value: unknown) => {
  if (!props.selectedComponent) return;
  emit("update:config", {
    ...props.selectedComponent.config,
    [key]: value,
  });
};
</script>

<template>
  <div class="property-panel">
    <h3 class="text-lg font-semibold mb-4">属性配置</h3>
    <div v-if="!selectedComponent" class="empty-placeholder">请选择组件</div>
    <div v-else class="space-y-4">
      <div v-for="prop in properties" :key="prop.label" class="property-item">
        <label class="block text-sm font-medium mb-1">{{ prop.label }}</label>
        <input
          v-if="prop.type === 'text'"
          type="text"
          class="w-full p-2 border rounded"
          :value="prop.value as string"
          @input="
            updateProperty(
              prop.label,
              ($event.target as HTMLInputElement).value
            )
          "
        >
        <input
          v-else-if="prop.type === 'number'"
          type="number"
          class="w-full p-2 border rounded"
          :value="prop.value as number"
          @input="
            updateProperty(
              prop.label,
              Number(($event.target as HTMLInputElement).value)
            )
          "
        >
        <input
          v-else-if="prop.type === 'boolean'"
          type="checkbox"
          class="h-5 w-5"
          :checked="prop.value as boolean"
          @change="
            updateProperty(
              prop.label,
              ($event.target as HTMLInputElement).checked
            )
          "
        >
      </div>
    </div>
  </div>
</template>

<style scoped>
.property-panel {
  /* @apply p-4 border-l w-64 h-full bg-white; */
  padding: 2em;
  border-left: 1px solid #ccc;
  width: 20em;
  height: 100%;
  background-color: #fff;
}
.empty-placeholder {
  /* @apply flex items-center justify-center h-full text-gray-400; */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ccc
}
</style>
